<template>
  <div>
    <a-card
      class="h-full rounded overflow-x-auto"
      :body-style="{ padding: '12px 16px', height: '100%' }"
      :bordered="false"
    >
      <div class="mb-2 flex justify-end">
        <a-input
          v-model="YtAdminUserAliasCH"
          :placeholder="$t('user.verification-code.userormailbox')"
          style="width: 180px; margin-right: 20px"
        ></a-input>
        <a-button
          type="primary"
          icon="search"
          @click="search"
          style="margin-right: 20px"
          >{{ $t("menu.form.basic-form") }}
        </a-button>
        <a-button type="primary" icon="plus" @click="add">{{
          $t("user.verification-code.required111566110577194")
        }}</a-button>
      </div>
      <a-table
        ref="table"
        size="middle"
        class="h-full"
        :dataSource="list"
        :pagination="pagination"
        @change="tableChange"
        :loading="listLoading"
        :rowKey="
          (record, index) => {
            return index;
          }
        "
      >
        <a-table-column key="YtAdminUserAliasCH" data-index="YtAdminUserAliasCH" width="150">
          <span slot="title">{{
            $t("user.verification-code.required111566185")
          }}</span>
        </a-table-column>
        <!-- 用户部门 -->
        <a-table-column
          key="YtAdminDepartment"
          data-index="YtAdminDepartment"
          width="150"
        >
          <span slot="title">{{
            $t("user.verification-code.required111566100000")
          }}</span>
        </a-table-column>
        <!-- <a-table-column key="YtAdminUuid" data-index="YtAdminUuid" width="150">
          <span slot="title">{{
            $t("user.verification-code.required111566186")
          }}</span>
        </a-table-column> -->
        <a-table-column
          key="YtAdminEmail"
          data-index="YtAdminEmail"
          width="150"
        >
          <span slot="title">{{
            $t("user.verification-code.required111566187")
          }}</span>
        </a-table-column>
        <a-table-column
          key="YtAdminCreatetime"
          data-index="YtAdminCreatetime"
          width="150"
        >
          <span slot="title">{{
            $t("user.verification-code.required111566188")
          }}</span>
        </a-table-column>
        <!-- <a-table-column key="YtAdminRoleName" :title="$t('user.verification-code.required111566189')">
            <template slot-scope="text, record">
                    <span>{{ isLang?record.YtAdminRoleName:record.ConfigurationItemsContentEn }}</span>
              </template>
          </a-table-column> -->
        <a-table-column
          key="YtAdminRoleName"
          :title="$t('user.verification-code.required111566189')"
          width="150px"
        >
          <!-- <span slot="title">{{ $t('user.verification-code.required111566189') }}</span> -->
          <template slot-scope="record">
            <template v-if="isLang == true">
              <template v-if="record.YtAdminRoleName.length > 0">
                <a-tag
                  v-for="tag in record.YtAdminRoleName"
                  :key="tag"
                  color="green"
                  >{{ tag }}</a-tag
                >
              </template>
              <template v-else>
                <span>{{ isLang ? "无" : "Not have" }}</span>
              </template>
            </template>
            <template v-else-if="isLang == false">
              <template v-if="record.YtAdminRoleNameEn.length > 0">
                <a-tag
                  v-for="tag in record.YtAdminRoleNameEn"
                  :key="tag"
                  color="green"
                  >{{ tag }}</a-tag
                >
              </template>
              <template v-else>
                <span>{{ isLang ? "无" : "Not have" }}</span>
              </template>
            </template>
          </template>
        </a-table-column>
        <a-table-column
          key="YtAdminStatus"
          data-index="YtAdminStatus"
          width="150"
        >
          <span slot="title">{{
            $t("user.verification-code.required111566190")
          }}</span>
          <template slot-scope="text, record">
            <a-switch
              default-checked
              :checked="text == 1"
              @change="changeStatus(record.YtId)"
              :loading="record.YtId == userId"
            />
          </template>
        </a-table-column>

        <a-table-column key="action" :title="$t('app.setting.othersettings')">
          <template slot-scope="text, record">
            <span>
              <a-button type="link" block @click="edit(record)">{{
                $t("user.verification-code.required111566191")
              }}</a-button>
              <a-popconfirm
                :title="$t('user.verification-code.required111566110577225')"
                :ok-text="$t('user.v15')"
                :cancel-text="$t('user.email.required11')"
                @confirm="() => del(record.YtId)"
              >
                <a-button type="link" block>{{
                  $t("app.setting.copy")
                }}</a-button>
              </a-popconfirm>
            </span>
          </template>
        </a-table-column>
      </a-table>
    </a-card>
    <setting ref="setting" @succeed="init" />
    <addUser ref="addUser" @succeed="init"></addUser>
  </div>
</template>

<script>
import { getUserList, setAdminStatus, changeAndDeleteUser } from "@/api/index";
import Setting from "./components/setting.vue";
import addUser from "./components/addUser.vue";
const columns = [
  {
    title: "用户名",
    className: "min-w-90p",
    dataIndex: "YtAdminUserAliasCH",
    align: "center",
    scopedSlots: { customRender: "YtAdminUserAliasCH" },
  },
  {
    title: "用户部门",
    className: "min-w-120p",
    dataIndex: "DepartmentName",
    align: "center",
    scopedSlots: { customRender: "DepartmentName" },
  },
  {
    title: "企业微信ID",
    className: "min-w-120p",
    dataIndex: "YtAdminUuid",
    align: "center",
    scopedSlots: { customRender: "YtAdminUuid" },
  },
  {
    title: "邮箱",
    className: "min-w-120p",
    dataIndex: "YtAdminEmail",
    align: "center",
  },
  {
    title: "入驻时间",
    className: "min-w-120p",
    dataIndex: "YtAdminCreatetime",
    align: "center",
    scopedSlots: { customRender: "YtAdminCreatetime" },
  },
  {
    title: "当前角色",
    className: "min-w-120p",
    dataIndex: "YtAdminRoleName",
    align: "center",
    scopedSlots: { customRender: "YtAdminRoleName" },
  },
  {
    title: "用户状态",
    className: "min-w-120p",
    dataIndex: "YtAdminStatus",
    align: "center",
    scopedSlots: { customRender: "YtAdminStatus" },
  },
  // {
  //   title: '管理员',
  //   className: 'min-w-120p',
  //   dataIndex: 'YtAdminManage',
  //   align: 'center',
  //   scopedSlots: { customRender: 'YtAdminManage' },
  // },
  {
    title: "操作",
    dataIndex: "action",
    align: "center",
    width: "150px",
    scopedSlots: { customRender: "action" },
  },
];

export default {
  components: { Setting, addUser },
  mounted() {
    let that = this;
    window.addEventListener("setItemEvent", function (e) {
      if (e.key == "lang") {
        let lang = JSON.parse(e.value);
        console.log(lang);
        if (lang == "zh-EN") {
          that.isLang = false;
        } else {
          that.isLang = true;
        }
      }
    });
  },
  data() {
    return {
      columns,
      isLang: true,
      /**分页 */
      pagination: {
        current: 1, //当前页
        pageSize: 10, //每页条数
        total: 0, //总条数
        showQuickJumper: true,
        hideOnSinglePage: true,
        showTotal: (total) => {
          total;
        },
      },
      YtAdminUserAliasCH: "",
      /**table数据 */
      list: [],

      //表格Loading
      listLoading: false,
      //抽屉提交按钮loading
      loading: false,
      userId: 0,
    };
  },
  methods: {
    init() {
      this.pagination.current = 1;
      this.getList();
    },
    //查询
    search() {
      this.pagination.current = 1;
      this.getList();
    },
    //分页
    tableChange(pagination) {
      this.pagination = pagination;
      this.getList();
    },
    /**
     * 获取列表
     */
    async getList() {
      this.listLoading = true;
      const { current, pageSize } = this.pagination;
      try {
        const { data } = await getUserList({
          ...{ page: current, pageSize, YtAdminUserAliasCH: this.YtAdminUserAliasCH },
          ...this.searchForm,
        });
        const { Page, PageSize, Total, Lists } = data;
        const defaultzhi = "-"; // 设置默认值
        const List2 = Lists.map((item) => {
          return {
            ...item,
            YtAdminUserAliasCH: item.YtAdminUserAliasCH || defaultzhi, // 如果原始数据中没有，那么使用默认值
            DepartmentName: item.DepartmentName || defaultzhi, // 如果原始数据中没有，那么使用默认值
            YtAdminEmail: item.YtAdminEmail || defaultzhi, // 如果原始数据中没有，那么使用默认值
            YtAdminUuid: item.YtAdminUuid || defaultzhi, // 如果原始数据中没有，那么使用默认值
            YtAdminCreatetime: item.YtAdminCreatetime || defaultzhi, // 如果原始数据中没有，那么使用默认值
            YtAdminStatus: item.YtAdminStatus || defaultzhi, // 如果原始数据中没有，那么使用默认值
          };
        });
        this.list = List2 || [];

        this.pagination = {
          current: Page,
          pageSize: PageSize,
          total: Total,
        };
      } catch (error) {
        this.$message.error(error);
      } finally {
        this.listLoading = false;
      }
    },
    //新增用户
    add() {
      this.$refs.addUser.open();
    },
    /**
     * 修改资料
     * @param {*} key
     */
    edit(record) {
      this.$refs.setting.open(record);
    },
    /**
     * 切换状态
     * @param {*} userId
     */
    async changeStatus(userId) {
      try {
        this.userId = userId;
        await changeAndDeleteUser({
          userId,
          mode: 1,
        });
        this.$message.success(
          this.$t("user.verification-code.required111566110577254")
        );
        this.init();
      } catch (error) {
        this.$message.error(error);
        console.log(error);
      } finally {
        this.userId = 0;
      }
    },
    /**
     * 切换状态
     * @param {*} userId
     */
    async changeManage(uid) {
      try {
        this.userId = uid;
        await setAdminStatus({
          uid,
        });
        this.$message.success(
          $t("user.verification-code.required111566110577254")
        );
        this.init();
      } catch (error) {
        this.$message.error(error);
      } finally {
        this.userId = 0;
      }
    },
    /**
     * 删除
     * @param {*} key
     */
    async del(userId) {
      try {
        await changeAndDeleteUser({
          userId,
          mode: 2,
        });
        this.$message.success(
          this.$t("user.verification-code.required111566110577133")
        );
        this.init();
      } catch (error) {
        this.$message.error(error);
      } finally {
      }
    },
  },
  created() {
    this.getList();
  },
};
</script>
<style lang="less" scoped>
/deep/.ant-table-row-cell-last {
  text-align: center !important;
}
</style>
